<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-[#d9eee3] box">
    <!-- 顶部Logo -->
    <Header />
    <!-- 主卡片容器 -->
    <div class="bg-white rounded-xl shadow-lg p-6 mx-auto w-95/100 mt-8">
      <div class="mb-4" style="font-size: 26px">
        <span class="font-bold">Enter your shipping and payment details.</span>
      </div>
      <div class="mb-6">
        <span class="text-lg">Fill in your information below.</span>
      </div>

      <!-- 订单信息 -->
      <div class="mb-8">
        <!-- <div class="flex justify-between items-center mb-4">
              <h2 class="text-xl font-medium">您的订单</h2>
              <button class="text-[#2D6E74]">编辑</button>
            </div> -->
        <div class="mb-6">
          <span class="text-lg font-bold mr-3">Your Order</span>
          <a :href="orderbackLink" class="text-[#477577] curson-point">Edit</a>
        </div>
        <div
          class="flex items-center border border-[#477577] rounded-lg"
          style="padding: 2px"
        >
          <img :src="bottleImg" alt="" class="w-16 h-16 object-cover rounded" />
          <div class="ml-4 flex-1 pr-4 flex justify-between">
            <h3 class="font-medium">{{ productName }}</h3>
            <p class="text-[#B42026] font-bold">
              ${{ paymentInfo.productPrice }}
            </p>
          </div>
        </div>
      </div>
      <div class="mb-6">
        <span class="text-lg font-bold mr-3">Insurance & Payment Notice</span>
      </div>
      <div class="leading-none">
        We will submit a claim to your insurance for the <span class="font-bold"> {{ productName }}</span>. If your insurance does not cover the cost, you will be responsible
        for the full <span class="font-bold">${{ paymentInfo.productPrice }}</span>  fee, which will be charged
        to the payment method on file. By proceeding, you acknowledge and agree
        to these terms.
      </div>
      <div class="mb-8 mt-8">
        <el-checkbox v-model="agreement" class="flex items-start">
          <span
            class="text-lg font-bold leading-none"
            :class="[agreement === true ? 'text-[#000000]' : 'text-[#B42026]']"
            >I acknowledge and agree to the billing and insurance terms.</span
          >
        </el-checkbox>
      </div>
      <!-- 个人信息表单 -->
      <div class="mb-8">
        <h2 class="text-xl mb-4 font-bold">Billing Address</h2>
        <div class="space-y-4">
          <div>
            <input
              v-model="paymentInfo.billingName"
              type="text"
              placeholder="Name"
              class="w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
            />
          </div>
          <div>
            <input
              v-model="paymentInfo.billingAddr1"
              type="text"
              placeholder="Address Line1"
              class="w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
            />
          </div>
          <div>
            <input
              v-model="paymentInfo.billingAddr2"
              type="text"
              placeholder="Address Line2"
              class="w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
            />
          </div>
          <div class="flex">
            <!-- <input
              v-model="paymentInfo.billingCity"
              type="text"
              placeholder="City"
              class="w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
            />
            <input
              v-model="paymentInfo.billingState"
              type="text"
              placeholder="State"
              class="ml-5 w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
            /> -->
            <div class="w-[50%]">
              <input
                v-model="paymentInfo.billingCity"
                type="text"
                placeholder="City"
                class="w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
              />
            </div>
            <div class="w-[50%] ml-5 ">
              <el-select
                v-model="paymentInfo.billingState"
                filterable
                clearable
                placeholder="State"
                class="w-full border-gray-400 focus:border-[#2D6E74] outline-none"
              >
                <el-option
                  v-for="item in states"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </div>
          </div>
          
          <div class="flex">
            <input
              v-model="paymentInfo.billingZipCode"
              type="text"
              placeholder="Zipcode"
              class="w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
            />
            <input
              v-model="paymentInfo.billingCountry"
              type="text"
              disabled
              placeholder="Country"
              class="ml-5 w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
            />
          </div>
        </div>
      </div>
      <div v-if="paymentInfo.shipping == 'TRUE'">
        <div>
          <p class="text-lg font-bold mr-3 mt-5">Shipping</p>
          <p class="leading-none mt-3">
            Where would you like your order to be delivered?<strong>
              PLEASE NOTE</strong
            >: We are unable to fulfill international orders as well as orders
            shipping to <span class="font-bold">New York, Alaska and Hawaii.</span> 
          </p>
        </div>
        <div class="mb-8 mt-8">
          <el-checkbox
            v-model="agreeShipping"
            class="flex items-start"
            @change="agreeShippingAsBilling"
          >
            <span class="text-lg leading-none text-[#000000]"
              >Shipping address is the same as Billing Address.</span
            >
          </el-checkbox>
        </div>
        <div class="space-y-4 mb-8" v-if="!agreeShipping">
          <div>
            <input
              v-model="paymentInfo.shippingName"
              type="text"
              placeholder="Name"
              class="w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
            />
          </div>
          <div>
            <input
              v-model="paymentInfo.shippingAddr1"
              type="text"
              placeholder="Address Line1"
              class="w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
            />
          </div>
          <div>
            <input
              v-model="paymentInfo.shippingAddr2"
              type="text"
              placeholder="Address Line2"
              class="w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
            />
          </div>
          <div class="flex">
            <div class="w-[50%]">
              <input
                v-model="paymentInfo.shippingCity"
                type="text"
                placeholder="City"
                class="w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
              />
            </div>
            <div class="w-[50%] ml-5 ">
              <el-select
                v-model="paymentInfo.shippingState"
                filterable
                clearable
                placeholder="State"
                class="w-full border-gray-400 focus:border-[#2D6E74] outline-none"
              >
                <el-option
                  v-for="item in shappingStates"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </div>
            <!-- <input
              v-model="paymentInfo.shippingState"
              type="text"
              placeholder="State"
              class="ml-5 w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
            /> -->
          </div>
          <div class="flex">
            <input
              v-model="paymentInfo.shippingZipCode"
              type="text"
              placeholder="Zipcode"
              class="w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
            />
            <input
              v-model="paymentInfo.shippingCountry"
              type="text"
              disabled
              placeholder="Country"
              class="ml-5 w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
            />
          </div>
        </div>
        <div>
          <p>Please select your desired shipping method.</p>
          <!-- 支付选项 -->
          <div class="space-y-3 mb-6">
            <div
              class="p-4 rounded-lg cursor-pointer transition-all duration-200"
              :class="{
                'bg-[#477577] text-white': selectedOption === '1',
                'bg-gray-100': selectedOption !== '1',
              }"
              @click="changeShippingBtn('1')"
            >
              <div class="flex items-center">
                <div
                  class="w-5 h-5 rounded-full bg-[#ffffff] mr-3 flex items-center justify-center text-sm"
                  :class="{
                    'border-white bg-white': selectedOption === '1',
                    'border-gray-400': selectedOption !== '1',
                  }"
                >
                  <el-icon v-if="selectedOption === '1'" class="text-gray-600"
                    ><Check
                  /></el-icon>
                </div>
                <span class="">GROUND - Free</span>
              </div>
            </div>
            <div
              class="p-4 rounded-lg cursor-pointer transition-all duration-200"
              :class="{
                'bg-[#477577] text-white': selectedOption === '2',
                'bg-gray-100': selectedOption !== '2',
              }"
              @click="changeShippingBtn('2')"
            >
              <div class="flex items-center">
                <div
                  class="w-5 h-5 rounded-full bg-[#ffffff] mr-3 flex items-center justify-center"
                  :class="{
                    'border-white bg-white': selectedOption === '2',
                    'border-gray-400': selectedOption !== '2',
                  }"
                >
                  <el-icon v-if="selectedOption === '2'" class="text-gray-600"
                    ><Check
                  /></el-icon>
                </div>
                <span class=""> OVERNIGHT - $25</span>
              </div>
            </div>
            <div
              class="p-4 rounded-lg cursor-pointer transition-all duration-200"
              :class="{
                'bg-[#477577] text-white': selectedOption === '3',
                'bg-gray-100': selectedOption !== '3',
              }"
              @click="changeShippingBtn('3')"
            >
              <div class="flex items-center">
                <div
                  class="w-5 h-5 rounded-full bg-[#ffffff] mr-3 flex items-center justify-center"
                  :class="{
                    'border-white bg-white': selectedOption === '3',
                    'border-gray-400': selectedOption !== '3',
                  }"
                >
                  <el-icon v-if="selectedOption === '3'" class="text-gray-600"
                    ><Check
                  /></el-icon>
                </div>
                <span class=""> SATURDAY OVERNIGHT - $40</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="mb-5">
        <p class="text-lg font-bold mr-3 mt-5">Payment Details</p>
        <p>Please enter your payment details.</p>
        <!-- <div class="mt-3 mb-3">
          <input
            placeholder="Cardholder Name"
            class="w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
          />
        </div>
        <div class="mt-2 mb-2">
          <input
            placeholder="Credit or Debit Card Number"
            class="w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
          />
        </div>
        <div class="flex">
          <el-date-picker
            v-model="insuranForm.dateOfBirth"
            type="date"
            prefix-icon=""
            placeholder="MM/YY"
            format="MM/YY"
            class="w-full mb-3 rounded-lg"
            size="large"
          />
          <input
            placeholder="CVV"
            class="ml-5 w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
          />
        </div> -->
        <!-- <form @submit.prevent="handleSubmit"> -->
        <input
          v-model="paymentInfo.cardholder"
          placeholder="Cardholder Name"
          class="w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
        />
        <form>
          <div id="card-element"></div>
          <!-- <button type="submit">验证</button> -->
          <div v-if="cardErrors" id="card-errors" class="error">
            {{ cardErrors }}
          </div>
          <div v-if="validationResult" id="validation-result">
            {{ validationResult }}
          </div>
        </form>
      </div>

      <!-- 提交按钮 -->
      <div class="flex justify-left mt-8 items-center">
        <a
          href="javascript:;"
          class="mr-5 text-[#2D6E74] underline"
          
          @click="goBack"
        >
          Back
        </a>
        <el-button
          :loading="loading"
          
          @click="handleSubmit"
          class="!curson-point !selfPay !w-[184px] !h-[60px]   !py-3 !rounded-button !hover:bg-red-700 transition-colors duration-200 !rounded-[30px]"
          :class="[(agreement === true ) ? ' !bg-[#477577] !text-white' : '!bg-[#dae3e4] !text-[#ffffff]']"
        >
        <template #loading>
          <div class="custom-loading">
            <svg class="circular" viewBox="-10, -10, 50, 50">
              <path
                class="path"
                d="
                M 30 15
                L 28 17
                M 25.61 25.61
                A 15 15, 0, 0, 1, 15 30
                A 15 15, 0, 1, 1, 27.99 7.5
                L 15 15
              "
                style="stroke-width: 6px; fill: rgba(0, 0, 0, 0)"
              />
            </svg>
          </div>
        </template>
          Purchase
        </el-button>
      </div>
    </div>
    <div class="mt-8 text-center">
      <img :src="bottomlog" alt="GOPATH Diagnostics" class="mx-auto w-30" />
    </div>
  </div>

  <ResMessage
    v-if="showMessage"
    :message="resMsg"
    :percentage="(percentage * 100) / (resLength - 1)"
  />
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted,watch } from "vue";
import { Check } from "@element-plus/icons-vue";
import log from "@/assets/img/red-uti-logo.png";
import bottomlog from "@/assets/img/green-uti-logo.png";
import bottleImg from "@/assets/img/uti-bottle.png";
import star from "@/assets/img/star.png";
import Header from "@/views/components/insurance-header.vue";
// import { test } from "@/api/index.ts";
import { loadStripe } from "@stripe/stripe-js";
import { storeToRefs } from "pinia";
import { useUtiStore } from "@/store/tui";
import { useFileStore } from "@/store/file";
import { paymentApi, getStepsApi, postDtaBystep, getStates } from "@/api/index";
import { useRouter } from "vue-router";
import { ElAlert, ElProgress, ElMessage } from "element-plus";
import ResMessage from "@/views/components/result-message.vue";

const router = useRouter();
const agreeShipping = ref(false);
const store = useUtiStore();
const fileStore = useFileStore();
const { productName, paymentInfo, orderbackLink, selectedOption , order} =
  storeToRefs(store);
const { cardImageFront, cardImageBack } = storeToRefs(fileStore);
const resMsg = ref("");
const timer = ref(null);
const percentage = ref(0);
const resLength = ref(0);
const showMessage = ref(false);
const loading = ref(false)
const states = ref();
const shappingStates = ref();
onMounted(async () => {
  stripe.value = await loadStripe(
    "pk_test_51Qwqab4hjKHAJxYpJehf2Y5DkVGRNUtqjS92RHKV3n1pV8Ncfa51WAIYOA7R7jmD6Jrl9nu6tdXufIZMGTODj0Zy00uy9PJa3D",
    {
      locale: "en",
    }
  );
  elements.value = stripe.value.elements();
  card.value = elements.value.create("card");
  card.value.mount("#card-element");
  getStatesApi();
  timer.value = setInterval(
    () => {
      findEl();
    },
    2000,
    1500
  );
});

onUnmounted(() => {
  clearInterval(timer.value);
});
watch(()=> selectedOption.value,(value)=>{
  console.log('value', value);
  
  if(value && paymentInfo.value.shipping == 'TRUE') {
    if (value === "1") {
      selectedOption.value = "1";
      paymentInfo.value.chargeShipping = "N";
      paymentInfo.value.shippingCost = 0;
      order.value = 'GROUND - Free'
    } else if (value === "2") {
      selectedOption.value = "2";
      paymentInfo.value.chargeShipping = "Y";
      paymentInfo.value.shippingCost = 25;
      order.value = 'OVERNIGHT - $25'
    } else if (value === "3") {
      selectedOption.value = "3";
      paymentInfo.value.chargeShipping = "Y";
      paymentInfo.value.shippingCost = 40;
      order.value = 'SATURDAY OVERNIGHT - $40'
    }
  }else {
        paymentInfo.value.chargeShipping = "N";
        paymentInfo.value.useShippingAddr = "N";
  }
},{immediate: true})
const findEl = () => {
  let form = document.querySelector("form ");
  let divs = form.querySelectorAll("div");
  if (divs && divs.length > 2) {
    // console.log('form', form)
    // console.log('divs', divs)
    divs[2].style.display = "none";
    return true;
  } else {
    return false;
  }
};
// validate card 开始
const stripe = ref(null);
const elements = ref(null);
const card = ref(null);
const cardErrors = ref("");
const validationResult = ref("");
// validate card 结束
const insuranForm = {
  dateOfBirth: "",
};

const agreement = ref(false);
const goBack = () => {
  router.push({
    path: "/insuraneInfo",
  });
};
const getId = async () => {
  cardErrors.value = ""; // 清除之前的错误信息
  validationResult.value = ""; // 清除之前的验证结果
  try {
    // 从服务器获取 SetupIntent 的 client_secret
    const response = await fetch("/api/uti/payment/create-setup-intent", {
      method: "POST",
    });
    console.log("response", response);
    const clientSecret = await response.text();
    console.log("clientSecret", clientSecret);
    // 使用 clientSecret 确认卡片设置
    const result = await stripe.value.confirmCardSetup(clientSecret, {
      payment_method: { card: card.value },
    });
    console.log("result", result);

    // 处理结果并更新 UI
    if (result.error) {
      cardErrors.value = result.error.message;
      validationResult.value = "";
      loading.value = false
    } else {
      cardErrors.value = "";
      // validationResult.value = `卡片验证成功！PaymentMethod ID: ${result.setupIntent.payment_method}`;
      paymentInfo.value.paymentMethodId = result.setupIntent.payment_method;
      if (result.setupIntent.payment_method) {
        paymentInfo.value.paymentMethodId = result.setupIntent.payment_method;
        // purchase()
        let formData = getFormData();
        const stpes = await getSteps(formData);
        console.log("stpes", stpes);
        let resultPP;

        if (stpes && stpes.data && stpes.data.length > 0) {
          resLength.value = stpes.data.length;
          showMessage.value = true;
          for (let index = 0; index < stpes.data.length; index++) {
            const itemObj = stpes.data[index];
            if (itemObj.onShippingOnly === "Y" && paymentInfo.value.shipping === 'FALSE') {
              continue;
            }

            resultPP = await postDtaBystep(
              stpes.data[index].setupUri,
              formData
            );
            if (resultPP.status === 200) {
              resMsg.value = itemObj.successMessage;
            }else {
              ElMessage.error(resultPP.response.data);
            }
            percentage.value = index;
            if (itemObj.newParams && itemObj.newParams.length > 0) {
              formData = getFormData(resultPP.data);
            }
            if (index === stpes.data.length - 1) {
              paymentInfo.value.orderId = resultPP.data.orderId;
              showMessage.value = false;
              router.push({
                path: "/finish",
              });
            }
            console.log("resultPP" + index + ":", resultPP);
          }
        }
      }
      loading.value = false
      console.log("PaymentMethod ID:", result.setupIntent.payment_method);
    }
  } catch (error) {

    cardErrors.value = "Error。";
    validationResult.value = "";
    showMessage.value = false;
    loading.value = false
  }
};
const handleSubmit = async () => {
  if (valid() && agreement.value === true) {
    loading.value = true
    getId();
  }
};
// 校验参数
const valid = () => {
  let falg = true;
  if(!agreement.value){
    ElMessage.warning("Do you acknowledge and agree to the billing and insurance terms ?");
    return false;
  }

  if(!paymentInfo.value.billingName) {
    ElMessage.warning("Billing Address is required");
    return false;
  }
  if(!paymentInfo.value.billingAddr1 ) {
    ElMessage.warning("Billing Address is required");
    return false;
  }

  if(!paymentInfo.value.billingCity ) {
    ElMessage.warning("Billing Address is required");
    return false;
  }
  if(!paymentInfo.value.billingState ) {
    ElMessage.warning("Billing Address is required");
    return false;
  }
  if(!paymentInfo.value.billingCountry ) {
    ElMessage.warning("Billing Address is required");
    return false;
  }
  if(!paymentInfo.value.billingZipCode ) {
    ElMessage.warning("Billing Address is required");
    return false;
  }

  
  if(paymentInfo.value.shipping === 'TRUE' && agreeShipping.value === false ){
    if(!paymentInfo.value.shippingName) {
      ElMessage.warning("Shipping address is required");
      return false;
    }
    if(!paymentInfo.value.shippingAddr1 ) {
      ElMessage.warning("Shipping address is required");
      return false;
    }

    if(!paymentInfo.value.shippingCity ) {
      ElMessage.warning("Shipping address is required");
      return false;
    }
    if(!paymentInfo.value.shippingState ) {
      ElMessage.warning("Shipping address is required");
      return false;
    }
    if(!paymentInfo.value.shippingCountry ) {
      ElMessage.warning("Shipping address is required");
      return false;
    }
    if(!paymentInfo.value.shippingZipCode ) {
      ElMessage.warning("Shipping address is required");
      return false;
    }

  }
  // if (paymentInfo.value.shipping === "TRUE") {
  //   if (!(paymentInfo.value.shippingCost > 0)) {
  //     ElMessage.warning("Please select your desired shipping method");
  //     falg = false;
  //   } else {
  //     falg = true;
  //   }
  // }
  return falg;
};
const getSteps = async (formData) => {
  const res = await getStepsApi(formData);
  console.log('res', res);
  
  // if(res.response !== 200){
  //   ElMessage.warning(error);
  // }
  return res;
};
const getFormData = (newparam = {}) => {
  paymentInfo.value = {
    ...paymentInfo.value,
    ...newparam,
  };
  const formData = new FormData();
  formData.append("paymentInfo", JSON.stringify(paymentInfo.value));
  formData.append("cardImageFront", cardImageFront.value);
  formData.append("cardImageBack", cardImageBack.value);
  return formData;
};
const purchase = async () => {
  // const data = {
  //   paymentInfo : {
  //     ...paymentInfo.value
  //   },
  //   cardImageFront: cardImageFront.value,
  //   cardImageBack : cardImageBack .value
  // }
  const formData = new FormData();
  console.log(JSON.stringify(paymentInfo.value));

  formData.append("paymentInfo", JSON.stringify(paymentInfo.value));
  formData.append("cardImageFront", cardImageFront.value);
  formData.append("cardImageBack", cardImageBack.value);
  // const res = await paymentApi(formData)
  console.log("formData", formData);

  const res = await fetch("/api/uti/payment/set-up-payment", {
    method: "POST",
    body: formData,
  });
  console.log("res", res);
};
const agreeShippingAsBilling = (item) => {
  console.log(paymentInfo.value);
  
  if(paymentInfo.value.billingState == 'AK' || paymentInfo.value.billingState == 'HI' || paymentInfo.value.billingState == 'NY') {
    ElMessage.warning("We are unable to fulfill international orders as well as orders shipping to New York, Alaska and Hawaii.");
    agreeShipping.value = false
    paymentInfo.value.shippingState = ''
    return  
  }
  console.log("item", item);
  if (item === true) {
    paymentInfo.value.shippingName = paymentInfo.value.billingName;
    paymentInfo.value.shippingAddr1 = paymentInfo.value.billingAddr1;
    paymentInfo.value.shippingAddr2 = paymentInfo.value.billingAddr2;
    paymentInfo.value.shippingCity = paymentInfo.value.billingCity;
    paymentInfo.value.shippingState = paymentInfo.value.billingState;
    paymentInfo.value.shippingZipCode = paymentInfo.value.billingZipCode;
    paymentInfo.value.shippingCountry = paymentInfo.value.billingCountry;
    paymentInfo.value.useShippingAddr = "N";
  } else {
    paymentInfo.value.useShippingAddr = "Y";
  }
  console.log(paymentInfo.value);
};
const changeShippingBtn = (type) => {
  if (type === "1") {
    selectedOption.value = "1";
    paymentInfo.value.chargeShipping = "N";
    paymentInfo.value.shippingCost = 0;
    order.value = 'GROUND - Free'
  } else if (type === "2") {
    selectedOption.value = "2";
    paymentInfo.value.chargeShipping = "Y";
    paymentInfo.value.shippingCost = 25;
    order.value = 'OVERNIGHT - $25'
  } else if (type === "3") {
    selectedOption.value = "3";
    paymentInfo.value.chargeShipping = "Y";
    paymentInfo.value.shippingCost = 40;
    order.value = 'SATURDAY OVERNIGHT - $40'
  }
};
const getStatesApi = async () => {
  const res = await getStates();
  if (res.status === 200) {
    states.value = res.data;
    shappingStates.value = res.data.filter((item)=>{
      return (item !== 'NY' && item !== 'AK' && item !== 'HI')
    })
  }
  console.log("res-state", res);
};
</script>
<style scoped lang="less">
@import "@/assets/css/base.css";
@import "@/assets/css/valiateCard.css";
.box {
  font-family: Bicyclette;
  padding-bottom: 20px;
}
.bg-gray-100 {
  background-color: #f3f4f6;
}
.bg-gray-600 {
  background-color: #4b5563 !important;
}
button:focus {
  outline: none;
}
input[type="radio"] {
  display: none;
}
.text-gray-600 {
  color: #6f6f6f;
}
.insurance,
.selfPay {
  line-height: 1.2;
  font-weight: 700;
  font-size: 14px;
}
// input::placeholder {
//   color: #000000;
// }
:deep(.el-input__wrapper) {
  height: 58px;
}
div.OffsetContainer {
  display: none !important;
}
.StripeElement .StripeElement-link {
  display: none !important;
}
.el-button .custom-loading .circular {
  margin-right: 6px;
  width: 18px;
  height: 18px;
  animation: loading-rotate 2s linear infinite;
}
.el-button .custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: #ffffff;
  stroke-linecap: round;
}

</style>
        